<template>
    <el-drawer
      title="添加图片"
      :visible="imageDrawer"
      :before-close="closeDrawer"
      size="50%"
    >
      <div style="padding: 30px">
        <div>
          <b>轮播图</b>
          <div style="margin-top: 20px">
            <image-upload v-model="swiperImageUrl" />
          </div>
        </div>
        <hr style="margin-top: 30px" />
        <div style="margin-top: 30px">
          <b>详情图</b>
          <div style="margin-top: 20px">
            <image-upload v-model="detailImageUrl" />
          </div>
        </div>
        <hr style="margin-top: 30px" />
        <div style="margin-top: 30px">
          <el-button @click="closeDrawer">取 消</el-button>
          <el-button type="primary" @click="submitProperty">提交</el-button>
        </div>
      </div>

    </el-drawer>
</template>

<script>
export default {
  name: "editImage",
  props: ['imageDrawer'],
  data() {
    return{
      // 以下是轮播图上传的
      swiperImageUrl: '', // 存轮播图 url
      swiperImages: [],
      // 以下是详情图上传的
      detailImageUrl: '', // 存详情图片 url
      detailImages: [],

    }
  },
  watch: {
    swiperImageUrl(s) {
      if (s !== '') {
        this.swiperImages.push(s);
      }
    },
    detailImageUrl(d) {
      if (d !== '') {
        this.detailImages.push(d);
      }
    },
  },
  methods: {

    /* ==== 和整个抽屉相关的 开始 ====*/
    submitProperty() {
      this.swiperImages = this.swiperImageUrl.split(',')
      this.detailImages = this.detailImageUrl.split(',')
      let allImage = {
        swiperImage: this.swiperImages,
        detailImage: this.detailImages,
      }
      this.swiperImageUrl = this.detailImageUrl = '';
      this.swiperImages = this.detailImages = [];
      this.$emit("imageDrawerData", allImage);
    },
    closeDrawer() {
      this.$confirm('还有未保存的工作哦确定关闭吗？')
        .then(_ => {
          this.$emit("closeImageDrawer");
        })
        .catch(_ => {});
    },
    /* ==== 和整个抽屉相关的 结束 ====*/
  }
}
</script>

<style scoped>

</style>
